<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const activeTab = ref(0)

const tableData = [
  { index: 1, title: '四川省交通建设集团有限责任公司智能化料场扬尘采购的公示', date: '2022-04-13' },
  { index: 2, title: '校工会关于智能节能环保采购/废标公告', date: '2022-04-13' },
  { index: 3, title: '平台更新智能招投标管理模块及智能化设备采购项目中标结果公示', date: '2022-04-13' },
  { index: 4, title: '三一智能电机-局部改电设备-招标招标公告-ZB202304130003\n\n项目标名', date: '2022-04-13' },
  { index: 5, title: '中电鸿信信息科技有限公司2023年劳务查重智能化改造项目单一来源采购方案公示', date: '2022-04-13' },
  { index: 6, title: '海外集土智慧封土地发包项目', date: '2022-04-13' },
  { index: 7, title: '先锋创业大楼（515-1室）60㎡', date: '2022-04-13' },
  { index: 8, title: '万达开发智能能源管理产业园项目（二期）比选结果公告', date: '2022-04-13' },
  { index: 9, title: '2023年度工伤基金结算支付智能审核监控项目竞争性磋商公告', date: '2023-04-13' },
  { index: 10, title: '万达开发智能能源管理产业园项目（三期）比选结果公告', date: '2022-04-13' },
  { index: 11, title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目', date: '2022-04-13' },
  { index: 12, title: '保定市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金', date: '2022-04-13' },
  { index: 13, title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目', date: '2022-04-13' },
  { index: 14, title: '保定市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金', date: '2022-04-13' },
  { index: 15, title: '[次氯酸钠扩产智能管理]采购公告 附件', date: '2022-04-13' }
]

const router = useRouter();

const goToDetail = (item) => {
  router.push({ path: `/platform/${item.index}` });
};
</script>

<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>平台动态</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容区 -->
    <div class="notice-table-card">
      <table class="notice-table">
        <thead>
          <tr>
            <th style="width:60px;">序号</th>
            <th style="text-align:left;">公告名称</th>
            <th style="width:140px;">发布时间
              <span class="sort-icons-vertical">
                <img src="/images/公告列表/u202.png" alt="排序图标" style="width:22px;height:22px;display:block;margin:auto;" />
              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, idx) in tableData" :key="idx" @click="goToDetail(item)" style="cursor: pointer;">
            <td><img src="/images/主页/u19.png" alt="序号图标" style="width:22px;height:22px;display:block;margin:auto;" /></td>
            <td class="title-cell">
              <span class="icon"></span>
              <span class="title-text">{{ item.title }}</span>
            </td>
            <td>{{ item.date }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 16px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  background: #fff;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 0 32px;
  margin-bottom: 4px;
}
.logo {
  display: flex;
  align-items: center;
}
.logo-img {
  width: 36px;
  height: 36px;
  margin-right: 8px;
}
.logo-title {
  font-size: 22px;
  font-weight: bold;
  color: #222;
}
.nav {
  display: flex;
  gap: 32px;
}
.nav span {
  font-size: 16px;
  color: #333;
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.nav .active {
  color: #00c6ad;
  border-bottom: 2px solid #00c6ad;
  font-weight: 600;
}
.user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.username {
  font-size: 16px;
  color: #666;
}
.el-breadcrumb {
  margin: 8px 0 8px 32px;
}
.notice-table-card {
  background: #fafbfc;
  border-radius: 10px;
  margin: 24px auto 0 auto;
  max-width: 1200px;
  padding: 32px 24px;
}
.notice-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.notice-table th, .notice-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
}
.notice-table th:first-child,
.notice-table td.serial-cell {
  width: 60px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}
.notice-table th:nth-child(2),
.notice-table td.title-cell {
  text-align: left;
  padding-left: 10px;
}
.notice-table th:last-child,
.notice-table td:last-child {
  text-align: left;
  padding-left: 10px;
}
.notice-table th {
  background: #f7fafd;
  color: #666;
  font-weight: 500;
  text-align: left;
}
.notice-table tr:last-child td {
  border-bottom: none;
}
.title-cell {
  display: flex;
  align-items: center;
  text-align: left;
}
.icon {
  color: #1abc9c;
  margin-right: 8px;
}
.title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  display: inline-block;
  max-width: 700px;
}
.sort-icons-vertical {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  margin-left: 2px;
  height: 20px;
  justify-content: center;
}
</style>